<template>
    <div class="quick-actions">
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item
          v-for="(action, index) in actions"
          :key="index"
          :icon="action.icon"
          :text="action.title"
          class="action-item"
          @click="$emit('action-click', action.path)"
        />
      </van-grid>
    </div>
  </template>
  
  <script setup>
  defineProps({
    actions: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item => 
          item.title && 
          item.icon && 
          item.path
        )
      }
    }
  })
  
  defineEmits(['action-click'])
  </script>
  
  <style lang="scss" scoped>
  .quick-actions {
    margin: 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--van-box-shadow-light);
  
    :deep(.van-grid-item__content) {
      padding: 20px 8px;
      background-color: var(--van-white);
      transition: all 0.2s ease;
  
      &:active {
        background-color: var(--van-gray-1);
      }
  
      &::after {
        border-color: var(--van-gray-2);
      }
    }
  
    .action-item {
      :deep(.van-grid-item__icon) {
        font-size: 28px;
        color: var(--van-primary-color);
        margin-bottom: 8px;
      }
  
      :deep(.van-grid-item__text) {
        font-size: 14px;
        color: var(--van-gray-8);
        font-weight: 500;
      }
    }
  }
  </style>